<template>
	<div id="r-biao2" style="width:100%;height:90%;"></div>
</template>

<script>
	import echarts from 'echarts';
	export default {
		name: 'recyclingCategory',
		props:['recyclingCategory'],
		data() {
			return {
				// 页面查询数据
				data: [],
				areaData: [],
				queryData: {
					selectArea: 0,
					date: [],
				},
				myChart: null,
				option: {

				}
			}
		},
		mounted() {
			setTimeout(() => {
				this.hadleGetFilesListApi();
			})
		},
		methods: {
			hadleGetFilesListApi(x) {
				const option = {
					title: {
						text: '回收品类占比',
						textStyle: {
							color: '#FFFFFF',
							fontSize: 20
						},
						x: 'right',
						// y:'top'
					},

					grid: {

						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					// legend: {
					// 	// orient: 'vertical',
					// 	// top: 'middle',
					// 	bottom: 10,
					// 	left: 'center',
					// 	data: ['西凉', '益州', '兖州', '荆州', '幽州']
					// },
					color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],
					series: [{
						type: 'pie',
						name:"占比",
						radius: '65%',
						center: ['50%', '50%'],
						selectedMode: 'single',
						labelLine:{  
						                normal:{  
						                    length:20
						                }  
						            },
						label : {
							normal : {
								// formatter: '{b}:{c}: ({d}%)',
								textStyle : {
									fontWeight : 'normal',
									fontSize : 15
								}
							}
						},
						data: x,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				let myChart = this.$echarts.init(document.getElementById('r-biao2'));
				myChart.setOption(option);
				window.addEventListener("resize",function(){
				    myChart.resize();
				})
			}
		},
		watch:{
			recyclingCategory(newval,oldval){
				var x=[]
				for(var i =0;i<newval.length;i++){	
					var obj={}
					obj.name=newval[i].typeName
					obj.value=newval[i].totalWeight
					x.push(obj)
				}
				this.hadleGetFilesListApi(x)
			}
		}
	};
</script>
